<template>
  <a-spin :spinning="!show">
    <div class="new-page" :style="`min-height: ${pageMinHeight}px`">
      <!-- S-查找条件 -->
      <a-form :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
        <a-row type="flex" :gutter="4">
          <a-col :span="12" :xs="24" :sm="9" :md="12" :lg="4">
            <a-form-item label="组织">
              <a-select v-model="form.orgId" placeholder="选择组织">
                <a-select-option :value="item.orgId" v-for="(item) in [{orgId:'',orgName:'全部组织'},...orgList]"
                  :key="item.orgId">{{item.orgName}}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="6" :xs="24" :sm="6" :md="12" :lg="6" style="margin-top:6px;">
            <a-button type="primary" @click="fetchList()">查询</a-button>
            <a-button style="margin-left: 10px" @click="editOpen()">添加</a-button>
          </a-col>
        </a-row>
      </a-form>
      <!-- E-查找条件 -->
      <!-- S-表格 -->
      <a-table :columns="columns" :data-source="data" bordered :pagination="false">
        <template slot="action" slot-scope="record">
          <a-space>
            <a-button type="primary" ghost @click="editOpen(record)">编辑</a-button>
            <a-button danger @click="deleteTap(record?.id)">删除</a-button>
            <a-button danger @click="stationOpen(record)">岗位列表</a-button>
          </a-space>
        </template>
        <template slot="parentDept" slot-scope="record">
          <span>{{record?.parentDept ? record?.parentDept : '无'}}</span>
        </template>
        <template slot="parentId" slot-scope="record">
          <span>{{record?.parentId ? record?.parentId : '无'}}</span>
        </template>
        <template slot="orgNames" slot-scope="record">
          <span>{{record?.orgNames ? record?.orgNames : '无'}}</span>
        </template>
      </a-table>
      <!-- E-表格 -->
      <!-- S-编辑弹框 -->
      <edit-model ref="editRef" @ok="fetchList" :orgList="orgList" :deptList="data" />
      <!-- E-编辑弹框 -->
      <!-- S-抽屉 -->
      <drawer ref="drawerRef" />
      <!-- E-抽屉 -->
    </div>
  </a-spin>
</template>

<script>
  import { mapState } from 'vuex'
  import { message } from 'ant-design-vue';
  import { getDeptList, postDeptDelete } from '@/services'
  import { getOrgList } from '@/services'
  import editModel from "./components/edit"
  import drawer from "./components/drawer"


  export default {
    name: 'Department',
    components: {
      editModel,
      drawer,
    },
    data() {
      return {
        // 页面状态
        show: false,
        // 组织列表
        orgList: [],
        // 表单
        form: {
          orgId: ''
        },
        // 表格数据
        data: [],
        // 结构
        columns: [
          {
            title: 'Id',
            dataIndex: 'id',
            key: 'id',
          },
          {
            title: '部门名称',
            dataIndex: 'deptName',
          },
          {
            title: '父级部门',
            dataIndex: 'parentDept',
            key: 'parentDept',
            scopedSlots: { customRender: 'parentDept' },
          },
          {
            title: '父级部门Id',
            dataIndex: 'parentId',
            key: 'parentId',
            scopedSlots: { customRender: 'parentId' },
          },
          {
            title: '组织名称',
            dataIndex: 'orgNames',
            key: 'orgNames',
            scopedSlots: { customRender: 'orgNames' },
          },
          {
            title: '操作',
            key: 'action',
            scopedSlots: { customRender: 'action' },
          },
        ],
      }
    },
    computed: {
      ...mapState('setting', ['pageMinHeight']),
    },
    async created() {
      // 获取组织列表
      await this.fetchOrgList()
      //  this.form.orgId = this.orgList.length ? this.orgList[0]['orgId'] : ''
      // 部门列表
      await this.fetchList()
    },
    methods: {
      /**
       * 打开岗位抽屉
       */
      stationOpen(e) {
        this.$refs.drawerRef.open(e)
      },
      /**
      * 打开弹框
      */
      editOpen(e) {
        this.$refs.editRef.open(e)
      },
      /**
       * 部门列表
       */
      async fetchList() {
        let { form } = this
        this.show = false
        let { code, data } = await getDeptList({
          orgId: form.orgId
        })
        this.show = true
        if (code == 200) {
          this.data = data
        } else {
          this.data = []
        }
      },
      /**
      * 获取组织列表 
      */
      async fetchOrgList() {
        let { code, data } = await getOrgList({})
        if (code == 200) {
          this.orgList = [...data]
        }
      },
      /**
       * 删除 
       */
      deleteTap(id) {
        let t = this
        this.$confirm({
          title: '提示',
          content: '你确定要删除吗?',
          okText: '确定',
          okType: 'danger',
          cancelText: '取消',
          async onOk() {
            t.show = false
            let res = await postDeptDelete(`?deptId=${id}`)
            t.show = true
            if (res.code == 0) {
              message.success('删除成功')
              t.fetchList()
            } else {
              message.error(res.msg)

            }
          },
        });
      },
    },
  }
</script>

<style scoped lang="less">
</style>